:root {
  --day: 14s;
  --sun-orbit-progress: -10s;
  --circle-delay: calc(var(--day) / 3.97);
  --circular-ease: cubic-bezier(.37, 0, .63, 1);
  --pov: 66deg;
  --bg-color: #111;
  --orbit-sphere-color: hsla(260, 80%, 60%, .6);
  --orbit-line-color: hsl(260 50% 66%);
  --orbit-line-thickness: .15rem;
  --orbit-plane-color: radial-gradient(
    circle at center,
    hsla(250, 70%, 75%, .025),
    hsla(250, 70%, 75%, .15)
  );
  --moon-orbit-size: 12dvmin;
  --mercury-orbit-size: 24dvmin;
  --venus-orbit-size: 36dvmin;
  --sun-orbit-size: 48dvmin;
  --mars-orbit-size: 60dvmin;
  --jupiter-orbit-size: 72dvmin;
  --saturn-orbit-size: 84dvmin;
  --stars-orbit-size: 96dvmin;
}

body {
  height: 100dvh;
  margin: 0;
  background: var(--bg-color);
  overflow: hidden;
}

.universe {
  height: 100%;
  perspective: 50000px;
  translate: 0 -5%;
  position: relative;
}

/* orbit line */
.orbit {
  --enter-delay: calc(.1s + var(--i) * (1s / 6));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 30dvmin);
  height: var(--size, 30dvmin);
  border-radius: 50%;
  background: var(--orbit-plane-color);
  box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
  transform-style: preserve-3d;
  rotate: x var(--pov);
  translate: -50% -40%;
  opacity: 0;
  animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
}

@keyframes orbit-appear {
  to {
    opacity: 1;
    translate: -50% -50%;
  }
}

/* orbit semi-sphere */
.orbit::after {
  --cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));
  content: "";
  position: absolute;
  top: -75%;
  left: calc(-1 * var(--orbit-line-thickness));
  width: calc(100% + var(--orbit-line-thickness) * 2);
  height: 250%;
  background: radial-gradient(
    circle var(--cutout) at center,
    #0000 99.9%,
    var(--orbit-sphere-color)
  );
  border-radius: 50%;
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.orbit.moon {
  --size: var(--moon-orbit-size);
}

.orbit.mercury {
  --size: var(--mercury-orbit-size);
}

.orbit.venus {
  --size: var(--venus-orbit-size);
}

.orbit.sun {
  --size: var(--sun-orbit-size);
}

.orbit.mars {
  --size: var(--mars-orbit-size);
}

.orbit.jupiter {
  --size: var(--jupiter-orbit-size);
}

.orbit.saturn {
  --size: var(--saturn-orbit-size);
}

.orbit.stars {
  --size: var(--stars-orbit-size);
  --orbit-sphere-color: hsla(260, 80%, 20%, .6);
  --orbit-line-color: hsl(260 50% 60%);
}

.orbit.stars .star {
  --size: 8dvmin;
  --astronomical-unit: calc(
    var(--stars-orbit-size) / 2 -
    (var(--y) * var(--y)) * 14dvmin
  );
  --star-x-delay: calc(var(--j) * -.5s);
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -8%;
  left: calc(50% + var(--astronomical-unit));
  width: calc(var(--size) * cos(var(--pov)));
  height: var(--size);
  background: #fff0ea99;
  mix-blend-mode: color-dodge;
  clip-path: polygon(
    50% 0,
    55% 45%,
    100% 50%,
    55% 55%,
    50% 100%,
    45% 55%,
    0% 50%,
    45% 45%
  );
  translate: -50% calc(-50% + var(--y) * 800%);
  rotate: x calc(var(--y) * 80deg);
  scale:
    calc(1 - var(--y) / 1.5)
    calc(1 - var(--y) / 2);
  transform-style: preserve-3d;
  animation:
    star-rise-and-shine
      var(--day)
      var(--star-x-delay)
      infinite,
    star-move-x
      var(--day)
      var(--star-x-delay)
      infinite var(--circular-ease),
    star-move-y
      var(--day)
      calc(0s - var(--circle-delay) + var(--star-x-delay))
      infinite var(--circular-ease);
}

@keyframes star-rise-and-shine {
  from, 52%, to {
    opacity: 0;
  }
  60%, 93% {
    opacity: 1;
  }
  63%, 67%, 71%, 76%, 81%, 86%, 91% {
    opacity: 1;
  }
  61%, 65%, 69%, 73%, 78%, 83%, 89% {
    opacity: max(.3, sin(var(--j)));
  }
}

@keyframes star-move-x {
  from, to {
    transform: rotateY(-70deg);
  }
  50% {
    transform: rotateY(70deg);
    left: calc(50% - var(--astronomical-unit));
  }
}

@keyframes star-move-y {
  50% {
    bottom: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
  }
}

.body, .body-container {
  --orbit-progress: 0s;
  --shine-delay: calc(
    var(--sun-orbit-progress) +
    var(--orbit-progress)
  );
  --anim-body-reveal: body-reveal
    1.5s
    1s
    forwards;
  --anim-body-index: body-index
    var(--day)
    var(--orbit-progress)
    infinite;
  --anim-body-shine: body-shine
    var(--day)
    var(--shine-delay)
    linear infinite;
  --anim-body-move-x: body-move-x
    var(--day)
    calc(var(--orbit-progress))
    infinite var(--circular-ease);
  --anim-body-move-y: body-move-y
    var(--day)
    calc(var(--orbit-progress) - var(--circle-delay))
    infinite var(--circular-ease);
  content: "";
  position: absolute;
  left: calc(50% + var(--astronomical-unit));
  top: 0;
  opacity: 0;
  translate: -50% calc(-50% - (50% * sin(var(--pov))));
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at center,
    var(--color-1, darkgray),
    var(--color-2, #333) 60%
  );
  background-size: 300%;
  background-position: center;
  border-radius: 50%;
  animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-shine),
    var(--anim-body-move-x),
    var(--anim-body-move-y);
}

@keyframes body-reveal {
  to {
    top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    opacity: 1;
  }
}

@keyframes body-index {
  from, 49% {
    z-index: var(--inverse-index);
  }
  50%, to {
    z-index: 0;
  }
}

@keyframes body-shine {
  to {
    background-position-x: -100%;
  }
}

@keyframes body-move-x {
  50% {
    left: calc(50% - var(--astronomical-unit));
  }
}

@keyframes body-move-y {
  50% {
    top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
  }
}

.body-container.earth {
  --size: 4dvmin;
  --color-1: #67aecb;
  --color-2: mediumblue;
  --astronomical-unit: 0%;
  --inverse-index: 8;
  --orbit-progress: calc(-1 * var(--circle-delay));
  animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-shine),
    earth-night
      var(--day)
      var(--shine-delay)
      linear infinite;
}

@keyframes earth-night {
  50% {
    box-shadow: inset 0 0 var(--size) calc(var(--size) / 5) #000b;
  }
}

.body-container.earth .human-lights {
  --color: #fd08;
  --px: .7em;
  --light: 0 var(--px) var(--color);
  --this-mad-city: 0 var(--px) palevioletred;
  font-size: calc(var(--size) / 50);
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1em;
  height: 1em;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: difference;
  box-shadow:
    -5em -17em var(--light),
    -3em -15em var(--light),
    -2em -16em var(--light),
    -5em -14em var(--light),
    -6em -13em var(--light),
    -2em -13em var(--light),
     0em -15em var(--light),
    -2em -18em var(--light),
     1em -17em var(--light),
     1em -15em var(--light),
     3em -14em var(--light),
     6em -9em var(--light),
     4em -9em var(--light),
     6em -7em var(--light),
     7em -5em var(--light),
     6em -13em var(--this-mad-city),
     4em -16em var(--light),
     3em -17em var(--light),
     5em -19em var(--light),
     9em -17em var(--light),
     1em -19em var(--light),
     10em -12em var(--light),
     15em -9em var(--light),
     20em -6em var(--light),
     19em -8em var(--light),
    -3em 1em var(--light),
     1em 4em var(--light),
     7em 2em var(--light),
     2em 1em var(--light),
     5em 10em var(--light);
  animation:
    earth-human-lights
      var(--day)
      var(--shine-delay)
      linear infinite;
}

@keyframes earth-human-lights {
  50% {
    opacity: 1;
  }
}

.body-container.earth::before,
.body-container.earth::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}

/* continent */
.body-container.earth::before {
  translate: -45% -40%;
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 1.8);
  border-radius: 50% 100%;
  clip-path: polygon(
    0 0,
    100% 0,
    70% 100%,
    30% 100%,
    25% 40%,
    3% 35%,
    0 30%,
    3% 10%,
    4% 0
  );
  background: linear-gradient(
    to bottom,
    palegoldenrod 30%,
    darkgreen 60%,
    sienna
  );
  mix-blend-mode: soft-light;
  filter: blur(.1dvmin);
}

/* clouds */
.body-container.earth::after {
  width: 100%;
  height: 100%;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at 50% 0%,
      #fff4 3%,
      #fff4 10%,
      #0000 11%,
      #0000 40%,
      #fff4 60%,
      #0000 80%,
      #0000 100%
    ),
    repeating-radial-gradient(
      ellipse
      calc(var(--size) / 1.5)
      calc(var(--size) / 6)
      at 30% 90%,
      #fff4,
      #fffa 1%,
      transparent 3%,
      #fff9 5%,
      transparent 7%,
      #fff4 9%,
      transparent 11%,
      transparent 100%
    );
  background-size: 200% 100%;
  background-position: right center;
  filter: blur(.1dvmin);
  mix-blend-mode: hard-light;
  animation:
    earth-clouds
      calc(var(--day) * 3.1)
      linear infinite;
}

@keyframes earth-clouds {
  to {
    background-position-x: -100%;
  }
}

.body-container.moon {
  --size: 2dvmin;
  --color-1: #eee;
  --color-2: #333;
  --astronomical-unit: calc(var(--moon-orbit-size) / 2);
  --inverse-index: 7;
  --orbit-progress: -3s;
  overflow: hidden;
}

.body-container.moon .crater {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  translate: 0 -50%;
  display: block;
  width: calc(var(--size) * 100%);
  height: calc(var(--size) * 100%);
  background: #0003;
  transform-style: preserve-3d;
  transform-origin: left center;
  rotate: x calc(90deg - var(--pov));
  border-radius: 50%;
  box-shadow:
    .1dvmin .1dvmin .1dvmin #fff7,
    -.1dvmin -.1dvmin .1dvmin #0009;
  animation:
    moon-crater
    var(--day)
    calc(var(--day) / -2.2)
    linear infinite;
}

@keyframes moon-crater {
  from {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * -100%)
      )
      rotateY(-90deg);
  }
  99.9% {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * 100%)
      )
      rotateY(90deg);
  }
  to {
    z-index: 0;
  }
}

.body-container.moon .crater-1 {
  --size: .3;
  --x: 30%;
  --y: 20%;
}

.body-container.moon .crater-2 {
  --size: .2;
  --x: 66%;
  --y: 55%;
}

.body-container.moon .crater-3 {
  --size: .15;
  --x: 55%;
  --y: 40%;
}

.body-container.moon .crater-4 {
  --size: .25;
  --x: 27%;
  --y: 50%;
}

.body-container.moon .crater-5 {
  --size: .1;
  --x: 60%;
  --y: 70%;
}

.body-container.moon .crater-6 {
  --size: .1;
  --x: 20%;
  --y: 40%;
}

.body.mercury {
  --size: 2dvmin;
  --color-1: #fea;
  --color-2: #530;
  --astronomical-unit: calc(var(--mercury-orbit-size) / 2);
  --inverse-index: 6;
  --orbit-progress: -1s;
}

.body.venus {
  --size: 4dvmin;
  --color-1: #fea;
  --color-2: #650;
  --astronomical-unit: calc(var(--venus-orbit-size) / 2);
  --inverse-index: 5;
  --orbit-progress: -4s;
}

.body.sun {
  --size: 6dvmin;
  --color-1: #fb3;
  --color-2: yellow;
  --astronomical-unit: calc(var(--sun-orbit-size) / 2);
  --inverse-index: 4;
  --orbit-progress: var(--sun-orbit-progress);
  box-shadow:
    0 0 1dvmin .2dvmin #ffd,
    0 0 3dvmin 1dvmin #fa3;
  animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-move-x),
    var(--anim-body-move-y);
}

.body-container.mars {
  --size: 3dvmin;
  --color-1: darkorange;
  --color-2: #750;
  --astronomical-unit: calc(var(--mars-orbit-size) / 2);
  --inverse-index: 3;
  --orbit-progress: -8s;
  overflow: hidden;
}

.body-container.mars .ice-cap {
  position: absolute;
  width: calc(var(--size) / 2.5);
  height: calc(var(--size) / 2.5);
  top: 0;
  left: 50%;
  translate: -50% -40%;
  rotate: x var(--pov);
  background: radial-gradient(
    circle at center,
    #fff8,
    transparent
  );
  mix-blend-mode: overlay;
  border-radius: 50%;
  clip-path: polygon(
    0 0,
    30% 0,
    32% 40%,
    34% 0,
    60% 0,
    82% 60%,
    84% 5%,
    90% 25%,
    70% 27%,
    88% 30%,
    95% 70%,
    60% 71%,
    93% 76%,
    100% 100%,
    66% 66%,
    33% 90%,
    0 100%
  );
  animation:
    mars-ice-cap
    var(--day)
    linear infinite;
}

@keyframes mars-ice-cap {
  to {
    transform: rotate(-1turn);
  }
}

.body-container.mars::before,
.body-container.mars::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  filter: blur(1.33dvmin);
  background: #1a1300ff;
  mix-blend-mode: hard-light;
  animation:
    mars-surface
    var(--day)
    linear infinite;
}

@keyframes mars-surface {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(200%);
  }
}

.body-container.mars::before {
  translate: -10% -20%;
  width: calc(var(--size) / 3.5);
  height: calc(var(--size) / 1.8);
  clip-path: polygon(
    5% 19%,
    32% 32%,
    65% 39%,
    83% 38%,
    98% 48%,
    90% 65%,
    78% 64%,
    66% 77%,
    56% 69%,
    47% 67%,
    32% 72%,
    19% 76%,
    8% 68%,
    4% 53%,
    2% 39%
  );
}

.body-container.mars::after {
  translate: -70% -40%;
  width: calc(var(--size) / 2.6);
  height: calc(var(--size) / 3.5);
  clip-path: polygon(
    5% 19%,
    32% 32%,
    65% 39%,
    83% 38%,
    98% 48%,
    90% 65%,
    78% 64%,
    66% 77%,
    56% 69%,
    47% 67%,
    32% 72%,
    19% 76%,
    8% 68%,
    4% 53%,
    2% 39%
  );
}

.body.jupiter {
  --size: 5dvmin;
  --color-1: #fea;
  --color-2: #321;
  --astronomical-unit: calc(var(--jupiter-orbit-size) / 2);
  --inverse-index: 2;
  --orbit-progress: -6s;
}

.body.jupiter::after {
  --great-red-spot-width: calc(var(--size) / 8);
  --great-red-spot-height: calc(var(--size) / 10);
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 calc(var(--size) / 5) var(--color-1);
  background:
    linear-gradient(
      to bottom,
      transparent 16%,
      #6526 22%,
      #6526 26%,
      transparent 30%,
      #652a 32%,
      #652a 42%,
      transparent 44%,
      transparent 53%,
      #652a 58%,
      #652a 70%,
      transparent 71%
    ),
    radial-gradient(
      ellipse
      var(--great-red-spot-width)
      var(--great-red-spot-height)
      at 70% 68%,
      #420b, transparent
    ),
    radial-gradient(
      ellipse
      calc(var(--great-red-spot-width) / 2.5)
      calc(var(--great-red-spot-height) / 2.5)
      at 80% 38%,
      #febb, transparent
    ),
    radial-gradient(
      ellipse
      calc(var(--great-red-spot-width) / 2)
      calc(var(--great-red-spot-height) / 2)
      at 45% 40%,
      #febb, transparent
    ),
    radial-gradient(
      ellipse
      calc(var(--great-red-spot-width) / 1.8)
      calc(var(--great-red-spot-height) / 1.8)
      at 30% 36%,
      #feba, transparent
    );
  background-size: 200% 100%;
  background-position: center center;
  mix-blend-mode: overlay;
  animation:
    jupiter-clouds
    var(--day) -12.5s
    linear infinite;
}

@keyframes jupiter-clouds {
  from {
    background-position-x: left;
  }
  to {
    background-position-x: -200%;
  }
}

.body-container.saturn {
  --size: 5dvmin;
  --color-1: #fea;
  --color-2: #531;
  --astronomical-unit: calc(var(--saturn-orbit-size) / 2);
  --inverse-index: 1;
  --orbit-progress: -1.5s;
  --ring-a-size: 180%;
  --ring-a-color: var(--color-1);
  --ring-b-size: 200%;
  --ring-b-color: var(--color-1);
}

.body-container.saturn .body-copy {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
}

.body-container.saturn::before,
.body-container.saturn::after,
.body-container.saturn .ring-far {
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: x var(--pov);
  border-radius: 50%;
}

.body-container.saturn::before,
.body-container.saturn::after {
  content: "";
  z-index: 1;
  translate: -50% -50%;
  clip-path: polygon(
    0 100%,
    100% 100%,
    100% 50%,
    0 50%
  );
}

.body-container.saturn .ring-far {
  translate: -50% -49%;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 50%,
    0 50%
  );
}

.body-container.saturn::before,
.body-container.saturn .ring-far.a {
  width: var(--ring-a-size);
  height: var(--ring-a-size);
  background: radial-gradient(
    circle calc(var(--size) / 1.5) at center,
    #0000 99.9%,
    var(--ring-a-color)
  );
}

.body-container.saturn::after,
.body-container.saturn .ring-far.b {
  width: var(--ring-b-size);
  height: var(--ring-b-size);
  background: radial-gradient(
    circle calc(var(--size) / 1.05) at center,
    #0000 99.9%,
    var(--ring-b-color)
  );
}

.body-container.saturn .shadow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  background: radial-gradient(
    ellipse
      calc(var(--size) / 1.4)
      calc(var(--size) / 1.4 * 3)
      at center,
    #0000 18%,
    #000 18.1%
  );
  width: 100%;
  height: 75%;
  transform-style: preserve-3d;
  transform-origin: left center;
  rotate: x var(--pov);
  translate: 0 -50%;
  border-radius: 30%;
  border-top-right-radius: 50% 90%;
  border-bottom-right-radius: 50% 90%;
  clip-path: polygon(
    50% 0,
    100% 0,
    100% 100%,
    50% 100%
  );
  animation:
    saturn-shadow
    var(--day)
    -2s
    linear infinite;
}

@keyframes saturn-shadow {
  from, 40%, to {
    opacity: 0.8;
  }
  50%, 90% {
    opacity: 0.7;
  }
  to {
    transform: rotateZ(-1turn);
  }
  7.8%, 43.5% {
    z-index: 0;
  }
  43.6% {
    z-index: 2;
  }
}